<!DOCTYPE html>
<!-- release v4.4.4, copyright 2014 - 2017 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="../themes/explorer/theme.min.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/plugins/sortable.min.js" type="text/javascript"></script>
    <script src="../js/fileinput.min.js" type="text/javascript"></script>
    <script src="../js/locales/zh.js" type="text/javascript"></script>
    <script src="../themes/explorer/theme.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
    <div class="page-header">
        <h1>Bootstrap File Input Example
            <small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i
                    class="glyphicon glyphicon-download"></i> Download Sample Files</a></small>
        </h1>
    </div>

    <form enctype="multipart/form-data">
        <label>Zh Input</label>
        <input id="file-zh" name="file-zh" type="file">
    </form>
    <hr>
    <br>
</div>
</body>
<script>
    $('#file-zh').fileinput({
        language: 'zh',
        uploadUrl: '#',
        enctype : 'multipart/form-data',
        maxFileCount:1,
        autoReplace: true,
        uploadAsync: true,
        showRemove : false,
        showCancel: false,
        showClose: false,
        multiple:false,
        allowedFileExtensions: ['xls', 'xlsx'],
        errorCloseButton: ''
    });
    $('#file-zh').on('fileerror', function(event, data, msg) {
        console.log('fileerror');
    });
    $('#file-zh').on('filebatchuploaderror', function(event, data, msg) {
        console.log('filebatchuploaderror');
    });
    $("#file-zh").on("filebatchselected", function(event, files) {
        console.log('filebatchselected');
    });
    $("#file-zh").on("fileclear",function(event, data, msg){
        console.log('fileclear');
        return false;
    });
    $('#input-id').on('filereset', function(event) {
        console.log("filereset");
    });
</script>
</html>